<template>
  <div class="record_part">
        <el-empty v-if="list.length==0" :image-size="100" style="width: 100%;" description="暂无记录" />
        <el-timeline style="width: 100%;" v-if="list.length>0">
            <el-timeline-item v-for="item in list" :key="item.id" color="#409EFF" :timestamp="item.txTimestamp+' '+'交易ID:'+item.txId" placement="top">
                <div class="content_part">
                    <div class="desc_part" v-for="option in item.changeContent" :key="option.id">
                    <div style="width: 100%;">
                        <div>{{ option.name }}:</div>
                        <div class="prop_part">
                            将<el-tag style="margin: 0 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 90%;">{{ option.before|| '(空)' }}</el-tag>改为<el-tag style="margin: 0 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 90%;">{{ option.after || '(空)' }}</el-tag>
                        </div>
                    </div>
                </div>
                </div>
                
            </el-timeline-item>
        </el-timeline>
        <div class="page_part">
            <AplidPaginate class="pageinate mt10" background v-bind="pageReac" small layout="prev, pager,next" @change="onPageChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
import AplidPaginate from '@/components/AplidCrud/src/AplidPaginate'
import apiMod from '@/apiMod/index'
import {xxtea_encrypt} from '@/utils/xxtea.js'
type Props = {
    nowRowData?:any,
    keyName?:string,
    otherKeyName?:string,
    tableName?:string
    code?:number|string
    isEncrypt?:boolean
}
let props = withDefaults(defineProps<Props>(),{
    nowRowData:{},
    keyName:'',
    otherKeyName:'',
    tableName:'',
    code:0,
    isEncrypt:false
})

let pageReac = ref({
	current: 1,
	size: 5,
	total: 0,
})
const onPageChange = (data) => {
	pageReac.value = data
	getChangeInfo()
}

let list = ref([])
const getChangeInfo = () =>{
    let soleKey = props.tableName+'-'+props.nowRowData[props.keyName]+`${props.otherKeyName?'-'+props.nowRowData[props.otherKeyName]:''}`
	let params = {
        code:props.code,
		pageParaPO:pageReac.value,
		soleKey:props.isEncrypt?xxtea_encrypt(soleKey):soleKey,
	}
	apiMod.view_blockchain_changeRecord(params).then(res=>{
		pageReac.value.total = res.data.total
		list.value = res.data.records
	})
}

getChangeInfo()


</script>
<style scoped lang="scss">
.record_part {
	padding: 20px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	.content_part{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		.desc_part{
        width: 45%;
		margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
		flex-wrap: wrap;
        .prop_part{
            margin: 10px 0;
        }
    }
	}
    
	.page_part {
		align-self: flex-end;
	}
}
</style>